import React, { useEffect } from "react";
import type { GetProp, TableProps } from "antd";
import { Button, Flex, Popconfirm, Table } from "antd";

import { useAppDispatch, useAppSelector } from "@/store";
import {
  get_sysConfig_page_list,
  selectSysConfigPageList,
  selectSysConfigPageLoading,
  selectSysConfigPageParams,
  set_is_show_config_modal,
  set_sys_config_page_params,
} from "@/store/slice/sysConfig";
import { deleteSysConfigById } from "@/api/sys/sysConfig";
import { global_const } from "@/utils/constent";
import { formartDateEmpty } from "@/utils";
import useRenderCheck from "@/hooks/renderCheck";

type ColumnsType<T extends object> = GetProp<TableProps<T>, "columns">;

const SysConfigTable: React.FC = () => {
  useRenderCheck("SysConfigTable");
  const columns: ColumnsType<SysConfigType> = [
    {
      title: "参数编码",
      dataIndex: "paramCode",
    },
    {
      title: "参数值",
      dataIndex: "paramValue",
    },
    {
      title: "类型",
      dataIndex: "paramType",
      render: (text) =>
        sys_menu_type_options.find((item) => item.value === text)?.name,
    },
    {
      title: "备注",
      dataIndex: "remark",
    },
    {
      title: "创建时间",
      dataIndex: "createDate",
      render: (text) => formartDateEmpty(text),
    },
    {
      title: "更新时间",
      dataIndex: "updateDate",
      render: (text) => formartDateEmpty(text),
    },
    {
      title: "操作",
      dataIndex: "operation",
      align: "center",
      render: (text, record: SysConfigType) => (
        <Flex gap="small" flex="flex" align="center" justify="center">
          <Button type="link" onClick={() => handleEditRowTable(record)}>
            编辑
          </Button>
          <Popconfirm
            title="是否确定删除当前数据?"
            okText="是"
            cancelText="否"
            onConfirm={() => handleDelRowTable(record)}
          >
            <Button type="link" danger>
              删除
            </Button>
          </Popconfirm>
        </Flex>
      ),
    },
  ];
  const sys_menu_type_options = [
    {
      name: "系统参数",
      value: 0,
    },
    {
      name: "非系统参数",
      value: 1,
    },
  ];
  const dispatch = useAppDispatch();
  const search_params = useAppSelector(selectSysConfigPageParams);
  const tableLoading = useAppSelector(selectSysConfigPageLoading);

  const pageList: PageType<SysConfigType> = useAppSelector(
    selectSysConfigPageList
  );

  useEffect(() => {
    // 初始化数据
    dispatch(get_sysConfig_page_list(search_params));
  }, []);

  const handleTableChange: TableProps["onChange"] = (pagination) => {
    const params = {
      current: pagination?.current || global_const.default_page_current,
      size: pagination?.pageSize || global_const.default_page_size,
      total: pagination?.total || global_const.default_page_total,
    };
    dispatch(set_sys_config_page_params(params));
    dispatch(get_sysConfig_page_list(params));
  };

  function handleEditRowTable(record: SysConfigType) {
    dispatch(
      set_is_show_config_modal({
        show: true,
        mode: 2,
        title: "编辑系统参数",
        data: record,
      })
    );
  }
  function handleDelRowTable(row: SysConfigType) {
    deleteSysConfigById(row.id).then((res) => {
      if (res) {
        dispatch(get_sysConfig_page_list(search_params));
      }
    });
  }
  return (
    <>
      <Table
        loading={tableLoading}
        size="small"
        rowKey="id"
        tableLayout="fixed"
        rowSelection={{}}
        columns={columns}
        dataSource={pageList.records}
        pagination={{
          defaultCurrent: pageList.current,
          current: pageList.current,
          pageSize: pageList.size,
          total: pageList.total,
          showSizeChanger: true,
          showTotal(total) {
            return ` 共 ${total} 条`;
          },
        }}
        onChange={handleTableChange}
      />
    </>
  );
};

export default SysConfigTable;
